import React, { useEffect, useState } from 'react'
import { InboxOutlined } from '@ant-design/icons'
import { message, Typography, Upload } from 'antd'
import './index.less'
import { downloadByOwnUrl } from '@/utils/util'
const { Dragger } = Upload
interface IProps {
  onChange?: (...set: any) => void
  multiple?: boolean
  templateUrl?: string
  templateText?: string
  isModal?: boolean
  loading?: boolean
}
const UploadFileByHand = (props: IProps) => {
  const handleChange = (info: any) => {
    const { fileList: newFileList } = info
    const file = newFileList[0]?.originFileObj
    props.onChange && props.onChange(file)
  }
  const download = (url: string) => {
    downloadByOwnUrl(url)
  }
  return (
    <>
      <Dragger
        multiple={props.multiple ? props.multiple : false}
        beforeUpload={() => false}
        name="file"
        onChange={handleChange}
        maxCount={1}
        disabled={props?.loading}
      >
        <div
          className="custom_fileuploadbyhand_wrap"
          style={{ padding: props.isModal ? 0 : '', minWidth: props.isModal ? 'auto' : '' }}
        >
          <p className="ant_upload_drag_icon">
            <InboxOutlined className="ant_upload_drag_icon_item" />
          </p>
          <p className="ant_upload_text">点击或拖动文件到此区域进行上传</p>
          <p className="ant_upload_hint">支持单次或批量上传</p>
        </div>
      </Dragger>
      {props?.templateUrl ? (
        <div className="uploadfile_template_text">
          <span style={{ color: 'var(--color-text-3)' }}>点击这里下载导入模板：</span>
          <Typography.Link
            onClick={() => {
              download(props.templateUrl!)
            }}
          >
            {props.templateText}
          </Typography.Link>
        </div>
      ) : null}
    </>
  )
}
export default UploadFileByHand
